<template>
	<view>
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<headNav></headNav>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<headNav></headNav>
		<!-- #endif -->

		<!-- 导航栏 -->

		<view class="nav">
			<view class="nav-title">
				<view @tap="changtap(0)" :class="{ active: nav_show == 0 }">
					<text>关注</text>
				</view>
				<view @tap="changtap(1)" :class="{ active: nav_show == 1 }">
					<text>推荐</text>
				</view>
				<view @tap="changtap(2)" :class="{ active: nav_show == 2 }">
					<text>圈子</text>
				</view>
				<view @tap="changtap(3)" :class="{ active: nav_show == 3 }">
					<text>视频</text>
				</view>
				<view @tap="changtap(4)" :class="{ active: nav_show == 4 }">
					<text>直播</text>
				</view>
			</view>
		</view>
		<view class="">
			<swiper :current="nav_show" :style="[
                    {
                        height:
                            nav_show == 1 ? `${swiperheight}rpx` : '暂无数据',
                    },
                ]" @change="huan">
				<!-- 关注 -->
				<swiper-item>
					<view class="swiper-item"> 关注 </view>
				</swiper-item>
				<!-- 推荐 -->
				<swiper-item>
					<view class="swiper_sty">
						<!-- 轮播图 -->
						<view style="margin-bottom: 0rpx">
							<swiper :duration="1000" indicator-dots="true" next-margin="200rpx">
								<swiper-item v-for="item in 3" :key="item">
									<view class="banner_one">
										<view class="one_top">
											<image src="../../static/discover/money001.png" mode="" style="
                                                    width: 20rpx;
                                                    height: 20rpx;
                                                "></image>
											<text>开工见面礼</text>
										</view>
										<view class="two_title">
											<text>牛年开工大吉</text>
										</view>
										<view class="three_title">
											<text>嗮实盘 红包再翻倍</text>
										</view>
										<view class="four_btn"> 立即参加 </view>
									</view>
								</swiper-item>
							</swiper>
						</view>

						<!-- 评论 -->
						<view class="comment_sty" v-for="item in 3" :key="item">
							<!-- 头像 -->
							<view class="comment_top">
								<view class="top_left">
									<view class="left_img">
										<image src="../../static/index/head001.png" mode=""
											style="width: 72rpx; height: 72rpx"></image>
									</view>
									<view class="left_title">
										<text style="
                                                color: #333;
                                                font-weight: 700;
                                                font-size: 24rpx;
                                            ">迪迦奥特曼</text>
										<text style="
                                                background-color: #fcf5ec;
                                                color: #d0a25e;
                                                display: inline-block;
                                                box-sizing: border-box;
                                                padding: 6rpx;
                                                font-size: 16rpx;
                                                margin: 0 10rpx;
                                            ">财龄1年</text>
										<text style="
                                                display: block;
                                                font-size: 20rpx;
                                                color: #999;
                                            ">04-10 16:46:33</text>
									</view>
								</view>
								<view class="top_right">
									<view class="right_btn">
										<text>关注</text>
										<image src="../../static/discover/attention.png" mode=""
											style="width: 20rpx; height: 20rpx"></image>
									</view>
								</view>
							</view>

							<!-- 文字 -->
							<view class="comment_title">
								<text>春节后基金连续下跌2日，还好有稳定收益呀！</text>
							</view>

							<!-- 下标题 -->
							<view class="comment_bottomtitle">
								<text class="tt_sty">#实盘秀#</text>
								<text class="tt_sty">#投资心得#</text>
								<text class="tt_sty">#牛年买牛基#</text>
							</view>

							<!-- 图片 -->
							<view class="comment_image">
								<image src="../../static/discover/image002.png" mode="" v-for="item in 3" :key="item">
								</image>
							</view>

							<!-- 标志 -->
							<view class="comment_sign">
								<image src="../../static/discover/rise.png" mode="" style="
                                        width: 20rpx;
                                        height: 20rpx;
                                        margin: 0 10rpx;
                                    "></image>
								<text class="sign_text">景顺长城鼎一和兴政我等噶</text>
								<text style="color: #f85656; font-size: 20rpx">+21.18%</text>
							</view>

							<!-- 三连 -->
							<view class="comment_triplet">
								<view class="triplet_sty">
									<image src="../../static/discover/share.png" mode=""></image>
									<text>分享</text>
								</view>
								<view class="triplet_sty border_sty">
									<image src="../../static/discover/comment.png" mode=""></image>
									<text>评论</text>
								</view>
								<view class="triplet_sty">
									<image src="../../static/discover/tags.png" mode=""></image>
									<text>点赞</text>
								</view>
							</view>
						</view>

						<!-- 发现更多有趣的人 -->
						<view class="find_more">
							<!-- 内容标题 -->
							<view class="more_headline">
								<view class="blue"></view>
								<view class="title">
									<text>帮你发现更多有趣的人</text>
								</view>
							</view>

							<!-- 更多用户 -->

							<scroll-view scroll-x="true">
								<view class="more_user">
									<view class="user_main" v-for="item in 5" :key="item">
										<view class="main_image">
											<image src="../../static/discover/usericon.png" mode="" style="
                                                    width: 108rpx;
                                                    height: 108rpx;
                                                "></image>
										</view>
										<view class="main_name">
											<text style="
                                                    color: #333;
                                                    font-size: 28rpx;
                                                ">小唐</text>
										</view>
										<view class="main_iintroduce">
											<text class="iintroduce_text">非知名财经分析</text>
										</view>
										<view class="main_attention">
											<text>+关注</text>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>

						<!-- 加载更多 -->
					</view>
				</swiper-item>
				<!-- 圈子 -->
				<swiper-item>
					<view class="swiper-item">圈子</view>
				</swiper-item>
				<!-- 视屏 -->
				<swiper-item>
					<view class="swiper-item">视屏</view>
				</swiper-item>
				<!-- 直播 -->
				<swiper-item>
					<view class="swiper-item">直播</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 发表信息 -->
		<view v-show="nav_show == 1">
			<image src="../../static/discover/add.png" class="publish" mode="" style=""></image>
		</view>
		发现
	</view>
</template>

<script>
	import headNav from "../../component/headNav.vue";
	export default {
		components: {
			headNav,
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				swiperheight: 1450 + 666 + 666 + 20,
				// #endif
				// #ifndef MP-WEIXIN
				swiperheight: 1450 + 666 + 666 + 100,
				// #endif
				nav_show: 1,
			}
		},
		methods: {
			changtap(num) {
				this.nav_show = num;
			},
			huan(e) {
				this.nav_show = e.detail.current;
			},
		}
	};
</script>

<style lang="scss" scoped>
	.nav {
		position: relative;
		width: 100%;
		height: 120rpx;
		background-color: #fff;

		.nav-title {
			position: absolute;
			top: -40rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-sizing: border-box;
			padding: 0 26rpx;
			width: 100%;
			height: 120rpx;
			background-color: white;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			color: #999;
		}

		.active {
			box-sizing: border-box;
			padding: 15rpx 25rpx;
			background-color: $uni-bg-color-header;
			color: #fff;
			border-radius: 10rpx;
		}
	}

	.swiper_sty {
		box-sizing: border-box;
		padding: 0 24rpx;
		background-color: #fff;

		.banner_one {
			box-sizing: border-box;
			padding: 24rpx;
			width: 480rpx;
			height: 250rpx;
			background: url(../../static/discover/banner001.png) no-repeat;
			background-size: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.one_top {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #ce9e56;
			}

			.two_title {
				font-size: 36rpx;
				font-weight: 700;
				color: #333;
			}

			.three_title {
				font-size: 30rpx;
				color: #333;
			}

			.four_btn {
				width: 168rpx;
				height: 52rpx;
				background-color: #be7f22;
				line-height: 52rpx;
				text-align: center;
				color: #fff;
				font-size: 24rpx;
				border-radius: 25rpx;
			}
		}

		.comment_sty {
			box-sizing: border-box;
			padding: 24rpx;
			width: 100%;
			height: 666rpx;
			border-radius: 30rpx;
			box-shadow: 0 0 40rpx 1rpx #ccc;
			/* #ifdef MP-WEIXIN */
			margin-top: 20rpx;
			/* #endif */
			/* #ifndef MP-WEIXIN */
			margin: 40rpx 0;

			/* #endif */
			.comment_top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.top_left {
					display: flex;
					justify-content: space-evenly;
					align-items: center;

					.left_title {
						margin: 0 20rpx;
					}
				}

				.right_btn {
					width: 110rpx;
					height: 60rpx;
					border: 1rpx solid #ccc;
					border-radius: 15rpx;
					text-align: center;
					line-height: 60rpx;
					color: $uni-bg-color-header;
				}
			}

			.comment_title {
				margin-top: 24rpx;
				font-size: 30rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}

			.comment_bottomtitle {
				margin: 16rpx;
				font-size: 24rpx;
				color: $uni-bg-color-header;

				.tt_sty {
					color: $uni-bg-color-header;
					margin-right: 20rpx;
				}
			}

			.comment_image {
				display: flex;
				flex-wrap: wrap;

				image {
					box-sizing: border-box;
					padding: 10rpx;
					width: 214rpx;
					height: 292rpx;
				}
			}

			.comment_sign {
				margin-top: 20rpx;
				box-sizing: border-box;
				padding: 0 10rpx;
				width: 400rpx;
				height: 36rpx;
				display: flex;
				align-items: center;
				background-color: #eaf1fe;
				border-radius: 18rpx;

				.sign_text {
					font-size: 24rpx;
					color: #333333;
					width: 250rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}

			.comment_triplet {
				margin-top: 40rpx;
				display: flex;
				height: 30rpx;
				align-items: center;
				justify-content: space-evenly;

				.triplet_sty {
					display: flex;
					align-items: center;
					width: 230rpx;
					justify-content: center;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					text {
						margin-left: 10rpx;
						color: #999;
					}
				}

				.border_sty {
					border-left: 4rpx solid #e5e5e5;
					border-right: 4rpx solid #e5e5e5;
				}

			}
		}

		.find_more {
			.more_headline {
				display: flex;
				align-items: center;
				height: 30rpx;
				padding: 40rpx 0;

				.blue {
					margin-right: 10rpx;
					width: 8rpx;
					height: 30rpx;
					background-color: $uni-bg-color-header;
					border-radius: 4rpx;
				}

				.title {
					font-size: 32rpx;
					color: #000000;
					font-weight: 700;
				}
			}

			.more_user {
				display: flex;
				// justify-content: space-evenly;
				align-items: center;
				background-color: #fff;
				width: 1200rpx;
				height: 360rpx;

				.user_main {
					margin: 0 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					align-items: center;
					width: 220rpx;
					height: 320rpx;
					background-color: #fff;
					border-radius: 20rpx;
					box-shadow: 0 0 10rpx 1rpx #efefef;

					.iintroduce_text {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						color: #999;
						font-size: 28rpx;
						width: 150rpx;
					}

					.main_attention {
						width: 142rpx;
						height: 52rpx;
						line-height: 52rpx;
						background-color: $uni-bg-color-header;
						text-align: center;
						color: #fff;
						border-radius: 10rpx;
					}
				}

			}
		}

		// 加载更多
		.load_more {}

	}

	.publish {
		position: fixed;
		/* #ifndef MP-WEIXIN */
		top: 1280rpx;
		right: 20rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		top: 1130rpx;
		right: 20rpx;
		/* #endif */
		width: 150rpx;
		height: 150rpx;

	}
</style>
